<template>
  <common-card class="grade-trends">
    <template #title>成绩趋势</template>
    <!-- <template #operate
      ><span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      ></template
    > -->
    <div>
      <NoData
        v-if="dataList?.length === 0"
        style="height: fit-content"
      ></NoData>
      <div
        v-show="dataList?.length && dataList?.length > 0"
        class="chart"
        ref="chartRef"
        style="width: 100%; height: 466px"
      ></div>
      <div class="table">
        <a-table
          :showSorterTooltip="false"
          :columns="GRADE_TRENDS"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <!-- <template v-if="column.dataIndex === 'homework_name'">
              <span class="skip-text" @click="showDetail(record, index)">{{
                record.homework_name
              }}</span></template
            > -->
            <template v-if="column.dataIndex === 'submit_rate'">
              {{ getPercent(record.submit_rate) }}%</template
            >
            <template v-if="column.dataIndex === 'right_rate'">
              {{ getPercent(record.right_rate) }}%</template
            >
            <template v-if="column.dataIndex === 'mean_time'"
              ><template v-if="getTime(record.mean_time)[0] > 0"
                >{{ getTime(record.mean_time)[0] }}小时</template
              >
              {{ getTime(record.mean_time)[1] }}分钟
            </template>
            <template v-if="column.dataIndex === 'create_at'">
              {{ dayjs(record.create_at * 1000).format('YYYY-MM-DD HH:mm') }}
            </template>
            <!-- <template v-if="column.dataIndex === 'operation'">
              <span class="skip-text" @click="showDetail(record, index)"
                >详情</span
              >
            </template> -->
          </template>
        </a-table>
      </div>
    </div>
  </common-card>
</template>
<script setup>
import { GRADE_TRENDS } from '../constant'
import CommonCard from '../components/CommonCard.vue'
import { ref, onMounted, watch, nextTick } from 'vue'
import useCharts from '@/utils/echart/index'
import { getClassTrends, getHomeworkInfo } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent, getTime } from '../utils'
import { useRouter } from 'vue-router'
// import { useReportStore } from '@/store/modules/report'
// import config from '../../../../envConfig'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('en')
// const reportStore = useReportStore()
const router = useRouter()
const situationReport = useSituationReport()
const dataList = ref()

const getOption = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      padding: [12, 16],
      borderRadius: 8,
      axisPointer: {
        type: 'shadow',
        label: {
          fontSize: 14,
          shadowColor: 'rgba(139, 200, 254, 0.15)'
        }
      },
      formatter: params => {
        let res = `<span style="font-weight: 700;">${params[0].axisValueLabel}</span><br>`
        params.forEach(item => {
          res += `<span style="display: flex; align-items: center; padding-top: 16px; justify-content: space-between;">
            <span style="width: fit-content; display: inline-flex; align-items: center; gap: 4px">
              <span style="display: inline-block; width: 12px; height: 12px; border-radius: 200px; background: ${item.color};"></span>
            <span style="color: rgba(4, 11, 26, 0.75);">${item.seriesName}</span>
          </span>
          <span style="color: rgba(4, 11, 26, 0.5)">${item.data}%</span>
         </span>`
        })
        return res
      }
    },
    dataZoom: {
      startValue: 0,
      endValue: 6,
      minSpan: dataList.value?.length
        ? dataList.value.length < 7
          ? 100
          : parseFloat(((6 / dataList.value.length) * 100).toFixed(1))
        : 1,
      type: 'slider',
      filterMode: 'none',
      showDetail: false
    },
    legend: {
      itemGap: 22,
      right: 0
    },
    grid: {
      left: '50',
      right: '15',
      bottom: '18%',
      top: '10%'
    },
    color: ['#8BC8FF'],
    xAxis: {
      type: 'category',
      data: dataList.value?.map(item => item.homework_name) || [],
      axisLabel: {
        formatter: function (value) {
          let res = value
          if (res.length && res.length > 9) {
            res = res.substring(0, 8) + '..'
          }
          return res || ''
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '正确率',
        splitNumber: 5,
        nameTextStyle: {
          align: 'right'
        },
        axisLabel: {
          formatter: `{value}%`
        }
      }
    ],
    series: [
      {
        data: dataList.value?.map(item => getPercent(item.grade_right_rate)),
        name: '年级',
        itemStyle: {
          color: '#FFD879'
        },
        symbol: 'circle',
        symbolSize: 14,
        type: 'line'
      },
      {
        data: dataList.value?.map(item => getPercent(item.right_rate)),
        name: '班级',
        itemStyle: {
          color: '#8BC8FF'
        },
        symbol: 'circle',
        symbolSize: 14,
        type: 'line'
      }
    ]
  }
  return option
}
const chartRef = ref(null)
const { setOption } = useCharts(chartRef, true, true, 'light')

const showDetail = async (record, index) => {
  await getHomeworkDetail(record.homework_id)
  // const url =
  //   config.MODE === 'development'
  //     ? `/report`
  //     : `${location.origin}${config.VITE_APP_BASE_URL}report`
  // nextTick(() => {
  //   window.open(url + '?ddtab=true')
  // })
}

const getHomeworkDetail = async id => {
  const params = {
    homework_id: id
  }
  // const { data } = await getHomeworkInfo(params)
  // reportStore.setHomeworkInfo(data)
  // reportStore.setCurrentClassId(data.classes[0].class_id)
}

const getData = async () => {
  const {
    data: { list }
  } = await getClassTrends(situationReport.search)
  dataList.value = list || []
}

watch(
  () => situationReport.search,
  async val => {
    if (val.class_id || val.grade_id || val.subject_id) {
      await getData()
      if (dataList.value && dataList.value?.length > 0) setOption(getOption())
    }
  },
  {
    deep: true
  }
)

onMounted(async () => {
  await getData()
  setOption(getOption())
})
</script>
<style lang="less" scoped>
@import '../style.less';

.grade-trends {
  .operate {
    &__icon {
      background: url('@/assets/images/situation-report/export.png') no-repeat
        center/cover;
      margin-right: 8px;
    }
  }

  .skip-text {
    color: #4d88ff;
    cursor: pointer;
  }

  .table {
    margin-top: @gap;
  }
}
</style>
